<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <title>房型入住信息</title>
    <style>
        .el-tabs {
            height: 100%;
        }

        .el-tabs__content {
            overflow: auto;
        }

        .bg {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.17);
        }

        .zz {
            transition: all 0.3s ease;
            font-size: 36px;
        }

        .layui-card:hover .zz {
            transform: scale(1.05);
            color: #fff;
        }

        .top {
            height: 140px;
            padding: 15px;

        }

        .layui-card-body {
            /* border: 1px solid red; */
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100% - 42px);
            /* 减去标题高度 */
            /* text-align: center; */
        }

        .sz {

            /* border: 1px solid black; */
            position: relative;
            height: 42px;
            line-height: 42px;
            color: rgba(255, 255, 255, 1);
            font-size: 20px;
            padding: 0 15px;
            border-radius: 2px 2px 0 0;
            text-align: center;
        }

        .zz {
            width: 80px;
            color: rgba(255, 255, 255, 1);
            font-size: 36px;
            text-align: center;
            /* display: flex; */
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: rgb(255, 201, 151);
        }

        .layui-card {
            /* border: 1px solid red; */
            /* 添加一个小手 */
            cursor: pointer
                /* 点击那个怎么一个阴影方便我知道我选中那个 */
        }

        .layui-card.selected {
            /* border: 2px solid #d31805; */
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
        }

        .text-ellipsis {
            /* #ifndef APP-PLUS-NVUE */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- <div class="title">
            <div style="padding: 5px;">
                名称<el-input v-model="page.value1" style="width: 200px; margin:0 10px; "
                    placeholder="请输入蓝牌名称"></el-input>
                <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
                <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>
                <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导出</el-button>
                <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
                    round>批量删除</el-button>
            </div>
        </div> -->
        <div class="top" style="display: flex; justify-content: space-between;">
            <!-- A类 -->
            <div
                style="width: 100%;height: 100%;background-color: #B71C1C; border-radius: 5px; margin-right: 15px;display: flex;flex-direction: column;">
                <div class="sz">总房间数</div>
                <div
                    style="font-size: 24px;color: #fff; height: 100%; display: flex; align-items: center;justify-content: center;">
                    共 {{count[0]?count[0]:0}} 间
                </div>
            </div>
            <div
                style="width: 100%;height: 100%;background-color: rgb(136,99,161); border-radius: 5px; margin-right: 15px;display: flex;flex-direction: column;">
                <div class="sz">入住房间数</div>
                <div
                    style="font-size: 24px;color: #fff; height: 100%; display: flex; align-items: center;justify-content: center;">
                    共 {{count[1]?count[1]:0}} 间
                </div>
            </div>
            <div
                style="width: 100%;height: 100%;background-color: rgb(25, 172, 29); border-radius: 5px; margin-right: 15px;display: flex;flex-direction: column;">
                <div class="sz">空闲房间数</div>
                <div
                    style="font-size: 24px;color: #fff; height: 100%; display: flex; align-items: center;justify-content: center;">
                    共 {{count[0] - count[1]?count[0] - count[1]:0 }} 间
                </div>
            </div>
            <!-- <div
                style="width: 100%;height: 100%;background-color: rgb(12,101,181); border-radius: 5px; margin-right: 15px;display: flex;flex-direction: column;">
                <div class="sz">预约房间数</div>
                <div
                    style="font-size: 24px;color: #fff; height: 100%; display: flex; align-items: center;justify-content: center;">
                    共 {{count[2]?count[2]:0}} 间
                </div>
            </div> -->
            <div
                style="width: 100%;height: 100%;background-color: rgb(223, 220, 37); border-radius: 5px; margin-right: 15px;display: flex;flex-direction: column;">
                <div class="sz">剩余房间数</div>
                <div
                    style="font-size: 24px;color: #fff; height: 100%; display: flex; align-items: center;justify-content: center;">
                    共 {{count[0] - count[1] - count[2]?count[0] - count[1] - count[2]:0}} 间
                </div>
            </div>
            <!-- B类 -->
        </div>
        <div class="body">
            <div class="left">
                <el-tree ref="tree" default-expand-all :expand-on-click-node="false" id="tree" style="max-width: 600px"
                    :data="treeData" @node-click="handleNodeClick" node-key="id" :props="{ label: 'name' }">
                    <template #default="{ node, data }">
                        <div class="custom-tree-node">
                            <span>{{ node.label }}</span>
                        </div>
                    </template>
                </el-tree>
            </div>
            <div class="right">
                <el-tabs class="demo-tabs" type="border-card" style="margin-bottom: 1%;">
                    <el-tab-pane label="房态图" style="height: 100%; display: flex; flex-direction: column;">
                        <el-tabs v-model="activeName" style="height: 42px;">
                            <el-tab-pane
                                :label="item.Room_Type_Name + (item.Room_Type_SerialNumber? '(剩余' + item.Total + '个)':'')"
                                :name="item.Room_Type_SerialNumber" v-for="item in tab"
                                :key="item.Room_Type_SerialNumber"></el-tab-pane>
                        </el-tabs>
                        <div style="background-color:#ebeef5; border: 5px solid #ebeef5; padding-bottom: 10px; height: calc(100% - 10px);overflow: auto;"
                            v-cloak>
                            <div v-for="(item,index) in Tabletdata" :key="index" style="position: relative; float: left; display: flex;flex-direction: column;justify-content: space-between; width: 120px;height: 120px; 
                                margin:10px 0 0 10px; overflow: hidden;"
                                :style="{backgroundColor:item.Row_Status=='0'?'rgb(136,99,161)':item.Row_Status=='2'?'rgb(12,101,181)':item.Row_Status=='3'?'rgb(223, 127, 37)':'rgb(25, 172, 29)',border:activeName==item.Room_Type_SerialNumber?'1px solid red':'1px solid #fff'}">
                                <div style="width: 140px; height: 95px; position: absolute; top:25px; left: 50%; transform: translateX(-50%); 
                                border-radius: 50% 50% 0 0;"
                                    :style="{backgroundColor:item.Row_Status=='0'?'rgb(237,232,242)':item.Row_Status=='2'?'rgb(223,248,255)':item.Row_Status=='3'?'rgb(255, 201, 151)':'rgb(215, 255, 215)'}">
                                </div>
                                <div
                                    style="display: flex; justify-content: space-between;margin: 0 5px;z-index: 1;flex-shrink: 0;">
                                    <span
                                        style="font-size: 16px; color: #fff; font-weight: bold;">{{item.Room_SerialNumber}}</span>
                                    <span
                                        style="font-size: 14px;">{{item.Row_Status=='0'?'入住':item.Row_Status=='2'?'预定':item.Row_Status=='3'?'已退房':'空闲'}}</span>
                                </div>
                                <div
                                    style="display: flex;justify-content: space-between;z-index: 1;padding: 10px 0;flex-shrink: 0; margin: 0 5px;">
                                    <span class="text-ellipsis"
                                        style="font-size: 14px;font-weight: bold; color: red;">{{item.Room_Type_Name}}</span>
                                    <span class="text-ellipsis" style="font-size: 14px;font-weight: bold; flex-shrink: 0;">{{item.Row_Status ==
                                        '3'?'':item.Guest_Name}}</span>
                                </div>
                                <div style="z-index: 1;display: flex; align-items: center;height: 100%;">
                                    <el-image @click="handlexq(item)" v-if="item.Row_Status=='' || item.Row_Status=='2'"
                                        src="../../../admin/images/qr.png" fit="contain"
                                        style="cursor: pointer; width: 20px;height: 20px;margin-left: 5px;"></el-image>
                                    <el-image @click="handledy(item)" v-if="item.Row_Status==''"
                                        src="../../../admin/images/rz.png" fit="contain"
                                        style="cursor: pointer; width: 20px;height: 20px;margin-left: 5px;"></el-image>
                                    <el-image @click="handletf(item)"
                                        v-if="item.Row_Status=='2' || item.Row_Status=='0'"
                                        src="../../../admin/images/tf.png" fit="contain"
                                        style="cursor: pointer; width: 20px;height: 20px;margin-left: 5px;"></el-image>
                                    <el-image @click="handleqs(item)" v-if="item.Row_Status=='3'"
                                        src="../../../admin/images/qs.png" fit="contain"
                                        style="cursor: pointer; width: 20px;height: 20px;margin-left: 5px;"></el-image>
                                </div>
                                <div
                                    style="z-index: 1;display: flex; justify-content: center;padding: 5px 0;flex-shrink: 0;">
                                    <span
                                        style="font-size: 14px;">{{item.Row_Status=='0'?getYMDDate(item.Check_In_Date)+'入住':item.Row_Status=='2'?getYMDDate(item.Check_In_Date1)+'预定':''}}</span>
                                </div>
                            </div>
                        </div>
                        <el-pagination style="margin-top: 1%;flex-shrink: 0;" :current-page="page.PageNumber"
                            :page-size="page.RowAmount" :page-sizes="[50, 100, 200, 300, 400]"
                            layout="total, sizes, prev, pager, next, jumper" :total="Total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </el-tab-pane>
                    <el-tab-pane label="列表" style="height: 100%; display: flex; flex-direction: column;">
                        <el-table id="table" border
                            :data-options="JSON.stringify({ 'TableName': 'xlsx_table','primary_key':'Xlsx_Table_SerialNumber'})"
                            v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
                            @selection-change="handleSelectionChange">
                            <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
                            <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
                                :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                                <template v-slot="{row}">
                                    <div v-if="isValueType(row[column.COLUMN_NAME])=='image'">
                                        <el-image style="width: 100px; height: 100px"
                                            :src="photo + row[column.COLUMN_NAME]" fit="contain"></el-image>
                                    </div>
                                    <template v-else>
                                        {{row[column.COLUMN_NAME]}}
                                    </template>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="操作" fixed="right" width="180">
                                <template #default="{row}">
                                    <div style="display: flex; align-items: center;">

                                        <el-dropdown trigger="click">
                                            <el-button type="danger" size="small">
                                                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                            </el-button>
                                            <template #dropdown>
                                                <el-dropdown-menu>
                                                    <el-dropdown-item @click="handleDownload(row)">
                                                        下载模板
                                                    </el-dropdown-item>
                                                    <el-dropdown-item @click="handleDownload(row,false)">
                                                        导出数据
                                                    </el-dropdown-item>
                                                    <el-dropdown-item @click="handleDelete(row)">
                                                        删除
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </div>
                                </template>
                            </el-table-column> -->
                        </el-table>
                        <el-pagination style="margin-top: 1%;flex-shrink: 0;" :current-page="page.PageNumber"
                            :page-size="page.RowAmount" :page-sizes="[50, 100, 200, 300, 400]"
                            layout="total, sizes, prev, pager, next, jumper" :total="Total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <el-dialog v-model="showDialog" width="750" class="custom-dialog"  :show-close="false" :close-on-click-modal="false">
            <template #header>
                <div class="dialog-header">
                    <span>预约/入住分配</span>
                </div>
            </template>
            <div class="dialog-content">
                <el-tabs type="border-card" v-model="activeName1">
                    <el-tab-pane label="小程序预约" name="1">
                        <el-descriptions style="width: 100%;margin-left: 10px;" :column="1" size="large" border>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">预约订单</div>
                                </template>
                                <yl-select width="1000px" @change="changeCheck"
                                    v-model="room_type_check_ins.Room_Type_Bookings_SerialNumber" clearable filterable
                                    placeholder="请选择预定订单" :options="room_type_bookings"
                                    :props="{value:'Room_Type_Bookings_SerialNumber',label:'Guest_Name'}">
                                    <el-table-column prop="Room_Type_Bookings_SerialNumber" width="160"
                                        show-overflow-tooltip label="预约单号"></el-table-column>
                                    <el-table-column width="160" prop="Guest_Name" show-overflow-tooltip
                                        label="入住用户"></el-table-column>
                                    <el-table-column width="160" prop="Check_In_Date" show-overflow-tooltip
                                        label="预约时间"></el-table-column>
                                    <el-table-column width="160" prop="Check_Out_Date" label="退房时间"></el-table-column>
                                    <el-table-column width="160" prop="People_Number" show-overflow-tooltip
                                        label="人数"></el-table-column>
                                    <el-table-column width="160" prop="Contact_Phone" label="联系方式"></el-table-column>
                                </yl-select>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">最晚入住时间</div>
                                </template>
                                <el-date-picker style="width: 100%;" v-model="room_type_check_ins.Latest_Check_In_Date"
                                    type="datetime" placeholder="请选择最晚入住时间" class="borderless-input"
                                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" size="large" />
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                    <el-tab-pane label="电话预约" name="2">
                        <el-descriptions style="width: 100%;margin-left: 10px;" :column="1" size="large" border>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">预约入住时间</div>
                                </template>
                                <el-date-picker style="width: 100%;" v-model="room_type_check_ins.Check_In_Date"
                                    type="datetime" placeholder="请选择预约入住时间" class="borderless-input"
                                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" size="large" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">预约退房时间</div>
                                </template>
                                <el-date-picker style="width: 100%;" v-model="room_type_check_ins.Check_Out_Date"
                                    type="datetime" placeholder="请选择预约退房时间" class="borderless-input"
                                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" size="large" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">最晚入住时间</div>
                                </template>
                                <el-date-picker style="width: 100%;" v-model="room_type_check_ins.Latest_Check_In_Date"
                                    type="datetime" placeholder="请选择最晚入住时间" class="borderless-input"
                                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" size="large" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">客户姓名</div>
                                </template>
                                <el-input v-model.trim="room_type_check_ins.Guest_Name" class="borderless-input"
                                    placeholder="请输入客户姓名" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">联系方式</div>
                                </template>
                                <el-input v-model.trim="room_type_check_ins.Contact_Phone" class="borderless-input"
                                    placeholder="请输入联系电话" />
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                    <el-tab-pane label="线下入住" name="3">
                        <el-descriptions style="width: 100%;margin-left: 10px;" :column="1" size="large" border>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">入住时间</div>
                                </template>
                                <el-date-picker style="width: 100%;" v-model="room_type_check_ins.Check_In_Date"
                                    type="datetime" placeholder="请选择入住时间" class="borderless-input"
                                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" size="large" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">预计退房时间</div>
                                </template>
                                <el-date-picker style="width: 100%;" v-model="room_type_check_ins.Check_Out_Date"
                                    type="datetime" placeholder="请选择预计退房时间" class="borderless-input"
                                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" size="large" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">客户姓名</div>
                                </template>
                                <el-input v-model.trim="room_type_check_ins.Guest_Name" class="borderless-input"
                                    placeholder="请输入客户姓名" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">联系方式</div>
                                </template>
                                <el-input v-model.trim="room_type_check_ins.Contact_Phone" class="borderless-input"
                                    placeholder="请输入联系电话" />
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                </el-tabs>

            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleshowDialog" class="cancel-btn">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="allocation" class="confirm-btn">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="showDialog1" width="750" class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>详情详细</span>
                </div>
            </template>
            <div class="dialog-content">
                <el-descriptions style="width: 100%;margin-left: 10px;" :column="1" size="large" border>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">预约订单</div>
                        </template>
                        <yl-select width="1000px" @change="changeCheck"
                            v-model="room_type_check_ins.Room_Type_Bookings_SerialNumber" clearable filterable
                            placeholder="请选择预定订单" :options="room_type_bookings"
                            :props="{value:'Room_Type_Bookings_SerialNumber',label:'Guest_Name'}">
                            <el-table-column prop="Room_Type_Bookings_SerialNumber" width="160" show-overflow-tooltip
                                label="身份证号"></el-table-column>
                            <el-table-column width="160" prop="Guest_Name" show-overflow-tooltip
                                label="入住用户"></el-table-column>
                            <el-table-column width="160" prop="Check_In_Date" show-overflow-tooltip
                                label="预约时间"></el-table-column>
                            <el-table-column width="160" prop="Check_Out_Date" label="退房时间"></el-table-column>
                            <el-table-column width="160" prop="People_Number" show-overflow-tooltip
                                label="人数"></el-table-column>
                            <el-table-column width="160" prop="Contact_Phone" label="联系方式"></el-table-column>
                        </yl-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">最晚入住时间</div>
                        </template>
                        <el-date-picker style="width: 100%;" v-model="room_type_check_ins.Latest_Check_In_Date"
                            type="datetime" placeholder="请选择最晚入住时间" class="borderless-input"
                            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" size="large" />
                    </el-descriptions-item>
                </el-descriptions>

            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog1 = false" class="cancel-btn">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="allocation" class="confirm-btn">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="QR_code" title="扫码入住" width="350" v-cloak>
            <div style="text-align: center;">
                <div class="qr-container">
                    <img :id="'qr-' + form?.House_Room_SerialNumber" style="width: 180px; height: 180px;">
                    <div class="qr-guide">
                        <i class="el-icon-d-arrow-bottom"></i>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/qrious.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="js/index.js"></script>
</body>

</html>